<template>
  <header>
    <div class="l-content">
      <el-button class="el-icon-menu" plain size="mini" @click="handleMenu"></el-button>
      <!-- <p style="color:#fff">首页</p> -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: item.path }" v-for="item in tags" :key="item.path">{{item.label}}</el-breadcrumb-item>
        
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown trigger="click" szie="mini">
        <span class="el-dropdown-link">
          <el-avatar
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          ></el-avatar>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item>推出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
import { mapState } from 'vuex';
export default {
  methods:{
    handleMenu(){
      this.$store.commit('collapseMenu')
    }
  },
  computed:{
    ...mapState({
      tags:state => state.tab.tabList
    })
  }
};
</script>

<style lang="less" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
header{
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-content: center;
}
.l-content{
display: flex;
align-items: center;
  .el-button{
    margin-right: 20px;
  } 
}
</style>